<template>
  <div>
    <div class="picBox">
      <van-image round width="150" height="150" :src="images" lazy-load fit="cover"/>
    </div>
    <div class="listBox">
      <van-cell
        v-for="item in myDataList"
        :key="item.id"
        :title="item.name"
        :icon="item.icon"
        :to="item.path"
        is-link
      >
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #right-icon>
          <van-icon name="arrow" />
        </template>
      </van-cell>
      <van-button type="default" block style="margin-top: 20px" @click="logOut">
        退出登录
      </van-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { showToast } from "vant";
import store from "@/store";
import images from "../../../assets/images/cat.jpeg";
const router = useRouter();
const myDataList = ref([
  {
    id: 1,
    icon: "user-circle-o",
    name: "个人信息",
    path: "/personDetals",
  },
  {
    id: 2,
    icon: "edit",
    name: "修改密码",
    path: "/updatePassword",
  },
  {
    id: 3,
    icon: "user-o",
    name: "二级账户",
    path: "/secondaryAccount",
  },
]);
const logOut = () => {
  store
    .dispatch("Logout")
    .then(() => {
      showToast({
        type: "success",
        message: "退出成功",
        forbidClick: true,
        duration: 1000,
      });
      setTimeout(() => {
        router.replace("/login");
      }, 1000);
    })
    .catch((error) => {
      //console.log('退出失败', error);
    });
};
</script>

<style lang="scss" scoped>
.picBox {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  background-color: #24c5b4;
  margin: 5px;
  box-sizing: border-box;
  border-radius: 8px;
}

.listBox {
  border-radius: 10px;
  overflow: hidden;
  margin: 10px 5px 5px 5px;
  min-height: 50vh;
}
</style>
